<!-- navMenu -->
<template>
  <el-menu
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    :collapse="isCollapse"
    background-color="#0d1e30"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
    <el-menu-item  @click="linkTo('/home')">
        <i class="el-icon-s-home"></i>
        <span slot="title">首页</span>
      </el-menu-item>
    <el-submenu v-for="(val,index) in routes" :index="(index).toString()" :key="index">
      <template slot="title" @click="linkTo(val.path)">
        <i :class="val.meta.icon"></i>
        <span>{{val.meta.title}}</span>
      </template>
      <el-menu-item v-for="(child,i) in val.children" :index="(index+'-'+i).toString()" :key="index+'-'+i" @click="linkTo(child.path)">
        <i :class="child.meta.icon"></i>
        {{child.meta.title}}
        </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import router from '../../routers'
//例如：import 《组件名称》 from '《组件路径》';

export default {
  name: "navMenu",
  //import引入的组件需要注入到对象中才能使用
  components: {
  },
  props:['isCollapse'],
  data() {
    //这里存放数据
    return {

    };
  },
  //监听属性 类似于data概念
  computed: {
    routes: function () {
     
     var arr=this.$router.options.routes.filter(function(val) {
        return val.children
      })
      return arr
    }
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    linkTo(path){
      if(this.$route.path===path) return
this.$router.push(path)
    },
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    }

  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // console.log(this.$router.options.routes);
  },
  beforeCreate() { }, //生命周期 - 创建之前
  beforeMount() { }, //生命周期 - 挂载之前
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroyed() { }, //生命周期 - 销毁完成
  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style  scoped>
</style>